import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, InputNumber, Radio, Modal, Cascader,Tag,Select } from 'antd'
import city from '../../utils/city'

const FormItem = Form.Item
const InputGroup = Input.Group;
const Option = Select.Option;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 18,
      offset: 6,
    },
    sm: {
      span: 18,
      offset: 6,
    },
  },
};


const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem label="二维码名称" hasFeedback {...formItemLayout}>
          {getFieldDecorator('keyword', {
            initialValue: item.keyword,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="二维码类型" hasFeedback {...formItemLayout}>
          {getFieldDecorator('model', {
            initialValue: item.model,
            rules: [
              {
                required: true,
              },
            ],
          })(
          <InputGroup compact>
          <Select style={{ width: '20%' }} defaultValue="1">
            <Option value="1">临时</Option>
            <Option value="2">永久</Option>
            </Select>
            <Input  style={{ width: '80%' }} placeholder="临时二维码过期时间, 最大为30天（2592000秒）." defaultValue="" />
            </InputGroup>
          )}
        </FormItem>
        <FormItem label="" hasFeedback {...tailFormItemLayout}>
          { <div>
              <Tag color="pink">目前有2种类型的二维码, 分别是临时二维码和永久二维码,</Tag>
              <Tag color="orange">前者有过期时间, 最大为30天（2592000秒）, 但能够生成较多数量,</Tag>
              <Tag color="cyan">后者无过期时间, 数量较少(目前参数只支持1--100000).</Tag>
            </div>
          }
        </FormItem>
        <FormItem label="批量生成个数" hasFeedback {...formItemLayout}>
          {getFieldDecorator('subnum', {
            initialValue: item.subnum,
            rules: [
              {
                required: true,
                type: 'number',
              },
            ],
          })(<InputNumber min={1} max={1000} />)}
        </FormItem>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
